import DragItem from "@/components/games/createjs/furniture/DragItem.js"
import BaseCreatejs from '@/components/games/createjs/js/BaseCreatejs.js'


export default class DragFurniture extends BaseCreatejs{
	constructor() {
		super();
		
		this.tabNames = ['btnPeople', 'btnAnimal', 'btnFurniture', 'btnDecorate', 'btnLamp', 'btnElectrical'];
		this.tabKeys = ['people', 'animal', 'furniture', 'decorate', 'lamp', 'electrical'];
		this.tabObjs = {
			'people': ['Man', 'Woman', 'Girl'],
			'animal': ['Cat', 'Dog', ],
			'furniture': ['Cabinet', 'Closet', 'Desk', 'Floor', 'Frame', 'RoundTable', 'SofaBrown', 'SofaGreen', 'SofaRed'],
			'decorate': ['Books', 'Cactus', 'Flower', 'FlowerBig', 'FlowerGreen'],
			'lamp': ['Clock', 'Imgs', 'LampCylinder', 'LampFloor', 'LampFloorGreen', 'LampTop', 'Picture', 'Window','Windows'],
			'electrical': ['DisplayerBack', 'DisplayerBlack', 'DisplayerWhite', 'Notebook', 'Sound', 'SoundHigh'],
		};
		this.stagePage;
		this.currentTab;
		this.currentPageIndex = 0;
		this.currentTabName = '';
		this.wallFloor;
		this.wallDragItems = [];
	}

	initView() {
		let loading = new this.lib.Loading();
		this.stage.addChild(loading);
		
		loading.btnStart.on("click", () => {
			loading.visible = false;
			this.stage.removeChild(loading);
			let relateCompIds = this.item.commonAttr.relateCompIds.split(',');
			_.forEach(relateCompIds, (relateId) => {
				if(relateId && relateId.length > 0){
					let compId = relateId.split("$")[1];
					let params = { id: compId, commonAttr: { isVisible: true } }
					this.store.commit('updateComponentAttr', params);
				}
			})

			this.initFurniture();
		});
	}

	initFurniture() {
		let wallFloor = this.wallFloor = this.stagePage.wallFloor;
		let tabNames = this.tabNames;
		let furniture = this.stagePage;
		furniture.btnCrop.visible = false;
		let currentTab = this.currentTab;
		let tabKeys = this.tabKeys;
		let btn;
		for (let i = 0, len = tabNames.length; i < len; i++) {
			btn = furniture.tabs[tabNames[i]];
			btn.key = tabKeys[i];
			btn.mouseChildren = false;
			btn.on("click", (e) => {
				let btn_ = e.target;
				if (currentTab) {
					currentTab.selected.visible = false;
				}
				currentTab = btn_;
				this.currentPageIndex = 0;
				this.currentTabName = btn_.key;
				this.refresh();
				btn_.selected.visible = true
			});
		}
		furniture.tabs[tabNames[0]].dispatchEvent("click");
		furniture.tabs.homeY = furniture.tabs.y;
		furniture.tabs.btnFold.mouseChildren = false;
		furniture.tabs.btnFold.on("click", (e) => {
			let btn_ = e.target;
			if (btn_.fold.visible) {
				btn_.fold.visible = false;
				btn_.unfold.visible = true;
				wallFloor.longWall.visible = true;
				wallFloor.shortWall.visible = false;
				furniture.tabs.y = furniture.tabs.homeY + furniture.tabs.nominalBounds.height - furniture.tabs[tabNames[0]].nominalBounds.height;
			} else {
				btn_.fold.visible = true;
				btn_.unfold.visible = false
				furniture.tabs.y = furniture.tabs.homeY;
				wallFloor.longWall.visible = false;
				wallFloor.shortWall.visible = true;
			}
		});
		furniture.tabs.btnPre.mouseChildren = false;
		furniture.tabs.btnPre.on("click", () => {
			this.currentPageIndex--;
			if(this.currentPageIndex <= 0){
				this.currentPageIndex = 0;
			}
			this.refresh();
		});
		furniture.tabs.btnNext.mouseChildren = false;
		furniture.tabs.btnNext.on("click", () => {
			this.currentPageIndex++;
			let currentObjs = this.tabObjs[this.currentTabName];
			let maxPageIndex = Math.floor(currentObjs.length/3);
			if(this.currentPageIndex >= maxPageIndex){
				this.currentPageIndex = maxPageIndex;
				if(this.currentPageIndex*3 >= currentObjs.length){
					this.currentPageIndex--;
				}
			}
			this.refresh();
		});
		wallFloor.on("click", (e) => {
			e.stopPropagation();
			let dragItem;
			for(let i = 0, len = this.wallDragItems.length; i < len; i++){
				dragItem = this.wallDragItems[i];
				dragItem.isVisibleBtns(false);
			}
		});

		this.stage.addChild(furniture);
	}

	refresh() {
		let tabCon = this.stagePage.tabs.tabCon;
		let currentObjs = this.tabObjs[this.currentTabName];
		tabCon.removeAllChildren();
		let obj;
		let hei = 200;
		let wh = 240;
		let hei_ = 0;
		for (let i = this.currentPageIndex*3, len = (this.currentPageIndex+1)*3; i < len; i++) {
			if(!currentObjs[i]){
				break;
			}
			obj = new this.lib[currentObjs[i]];
			obj.mouseChildren = false;

			let hit = new window.createjs.Shape();
			hit.graphics.beginFill("#000").drawRect(-obj.nominalBounds.width/2, -obj.nominalBounds.height/2, obj.nominalBounds.width, obj.nominalBounds.height);
			obj.hitArea = hit;

			obj.className = currentObjs[i];
			if (obj.nominalBounds.width > wh) {
				obj.scaleX = obj.scaleY = wh / obj.nominalBounds.width
			}
			if (obj.nominalBounds.height > wh) {
				hei_ = wh;
				obj.scaleX = obj.scaleY = wh / obj.nominalBounds.height
			} else {
				hei_ = hei
			}
			obj.x = 20 + i % 3 * wh + wh / 2;
			obj.y = 30 + hei_ / 2;
			
			obj.on("click", (e) => {
				let obj_ = e.target;
				let item = new this.lib[obj_.className]
				
				let dragItem = new DragItem(new this.lib.DragItem(), item, this.stage);
				dragItem.addItem(this.wallFloor);
				this.wallDragItems.push(dragItem);

				dragItem.container.on("destroy", (e) => {
					let target = e.target
					let index = this.wallDragItems.indexOf(target);
					if(index != -1){
						this.wallDragItems.splice(index, 1);
					}
				})
			});
			tabCon.addChild(obj);
		}
	}

	destroy(){
		
	}
}
